<template>
  <el-card shadow="never" class="border-none mt-6" v-emptyDataMask="state.chartSalesDataMask">
    <template #header>
      <span>近一年销量趋势</span>
    </template>
    <div class="chart-top">
      <div class="info-data">
        <div class="d-item">
          <h3>总销售数量</h3>
          <p><em v-text="chartSalesTop.total ?? '-'"></em></p>
        </div>
      </div>
      <div class="data-ctrl"><span v-text="chartSalesTop.start"></span><span>至</span><span v-text="chartSalesTop.end"></span></div>
    </div>
    <e-chart-sales :data="chartSalesData" />
  </el-card>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import EChartSales from '@/plugins/pair/e-chart-sales.vue'
import { getSellerProductSalesKeep } from '@/api/common'
const props = defineProps({
  sellerId: {
    type: String,
    default: '',
  },
})
const state = reactive({
  chartSalesDataMask: false,
})
const chartSalesData = ref({})
const chartSalesTop = ref({
  total: '-',
  start: '2024-01',
  end: '2024-12',
})
const reqSellerProductSalesKeep = () => {
  if (props.sellerId) {
    getSellerProductSalesKeep(props.sellerId).then((res) => {
      const productSalesKeep = res.data.pairList
      if (productSalesKeep) {
        chartSalesTop.value = {
          total: res.data.total,
          start: productSalesKeep[0].timePoint,
          end: productSalesKeep[productSalesKeep.length - 1].timePoint,
        }
        chartSalesData.value = {
          xData: productSalesKeep.map((item: any) => item.timePoint),
          yData: productSalesKeep.map((item: any) => item.value),
        }
        state.chartSalesDataMask = true
      }
    })
  }
}

watch(
  () => props.sellerId,
  () => {
    reqSellerProductSalesKeep()
  }
)

onMounted(() => {
  reqSellerProductSalesKeep()
})
</script>
<style scoped lang="scss"></style>
